<!-- Created by mhy on 2018/6/21.

 -->
<template>
  <div class="login-wx" style="background-color: white;height: 100%">
    <p class="login-title-parent">装裱大师</p>
    <p class="login-title-sub">管理后台</p>
    <div class="code-container">
      <div class="wx-contain" id="wxDom"></div>
      <!--<img src="" class="wx-code-success">-->
      <!--<img src="" class="wx-code-error">-->
    </div>
    <br>
    <!--<p class="login-wx-sign1">微信扫码登录</p>-->
    <p class="login-wx-sign2">动态二维码，10分钟之内有效</p>
    <!--<router-link :to="{name:'homepage'}">首页</router-link>-->
    <button class="login-btn-phone" @click="routerToMobile()">切换至 手机号登录</button>
  </div>
</template>

<script>
  import {mapGetters, mapActions, mapState} from 'vuex'
  export default {
    methods: {
      ...mapActions([
        'loginWithWX',
        'getUserInfo',
        'infoWithWX',
        'getALLFactoryList',
      ]),
      routerToMobile(){
        this.$router.push('/');
      },
      getUrlParam: function () {
        var params = {};
        var str = location.href; //取得整个地址栏
        var num = str.indexOf("?");
        str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]

        var arr = str.split("&"); //各个参数放到数组里
        for (var i = 0; i < arr.length; i++) {
          num = arr[i].indexOf("=");
          if (num > 0) {
            var name = arr[i].substring(0, num);
            var value = arr[i].substr(num + 1);
            params[name] = value
          }
        }
        return params
      },
      wxLogin () {
        localStorage.setItem('codepath', '/login/loginwx')
        var obj = new WxLogin({
          id: "wxDom",
          appid: "wx7d663c06d928b088",
          scope: 'snsapi_login',
          redirect_uri: window.encodeURI('http://test.51artx.com/dist/#/login/loginwx/')
        })
//        console.log(obj)
      },
      wxToken(code) {
        localStorage.setItem('codepath', '')
        this.infoWithWX({code: code})
          .then(data => {
          this.loginWithWX({
          openid: data.result.openid,
          deviceid: 'SHWKKFUSTAAD-SAS312e'
        })
          .then(wxlogindata => {
          this.getUserInfo({userid: wxlogindata.result.userid})
          .then((data)=>{
            this.getALLFactoryList({page: 1})
          this.$store.state.logined = true
        this.$store.state.navTitle = '首页'
        this.$store.state.userInfo = data.result
        this.$router.replace('/homepage')
      })
      })
      .catch(err => {
//          var str = location.href; //取得整个地址栏
//          var num = str.indexOf("?");
//          str = str.substr(num + 1);
          location.href = 'http://test.51artx.com/dist/#/login/loginwx'
          this.$dialog.toast({
          mes: '登录失败，您的微信未注册平台管理员，请重新扫描二维码',
          icon: 'error',
          timeout: 3000
        })
      })
      })

//        axios.get('https://api.weixin.qq.com/sns/oauth2/access_token?appid=wx7d663c06d928b088&secret=c196ef3799354c59528e681978a131ea&code=' + code + '&grant_type=authorization_code')
//          .then(data => {
//          var json = JSON.parse(data)
//          if(json.openid && json.access_token){
//          axios.get('https://api.weixin.qq./sns/userinfo?access_token=' + json.access_token + '&openid=' + json.openid)
//            .then(dataInfo => {
//            var info = JSON.parse(dataInfo)
//            var params = {
//              openid: info.openid,
//              deviceid: 'platformweb',
//              usericon: info.headimgurl,
//              username: info.nickname,
//              operationtype: 'platformuserlogin'
//            }
//            this.loginWithWX(params)
//            .then((data) => {
//              this.getUserInfo({userid: data.result.userid})
//                .then((data) => {
//                this.$store.state.logined = true
//                this.$store.state.navTitle = '首页'
//                this.$store.state.userInfo = data.result
//                console.log(this.$store.state.userInfo.usericon)
//                console.log(this.$store.state.login.userinforesult.usericon)
//                this.$router.replace('/homepage')
//                })
//            })
//              .catch(e => {
//            this.$dialog.toast({
//            mes:'登录错误，您不是管理员！',
//            timeout: 1000
//          })
//          })
//        })
//        .
//          catch(e => {}
//        )
//        }
//      })
//      .
//        catch(e => {}
//      )
      }
    },
    mounted(){
      if (this.getUrlParam()['code']) {
//              window.location.href = 'http://test.51artx.com/#/login/loginwx' + '?code=' + this.$route.query.code
        this.wxToken(this.getUrlParam()['code'])
      } else {
        this.wxLogin()
      }

    }

  }
</script>

<style scoped>
  body, html {
    background-color: white;
    width: 100%;
    height: 100%;
  }

  .code-container {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 73px;
  }

  .wx-contain {
    width: 320px;
    height: 320px;
  }

  .login-title-parent {
    font-size: 50px;
    font-weight: 200;
    color: #000000;
    padding-top: 128px;
  }

  .login-title-sub {
    font-size: 20px;
    margin-top: 30px;
    color: #9B9B9B;
  }

  .login-wx-code {
    margin-top: 37pt;
  }

  .login-wx-sign1 {
    font-size: 8pt;
    color: #303641;
    margin-top: 41px;
  }

  .login-wx-sign2 {
    font-size: 12px;
    color: #9B9B9B;
    margin-top: 81px;
  }

  .login-btn-phone {
    font-size: 12px;
    color: #9B9B9B;
    margin-top: 84pt;
    outline: none;
    background-color: transparent;
    border: 0;
    margin-bottom: 100px;
  }

</style>
